<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Update the camera in a 3D view - 4.6</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #buttonsDiv {
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 12px;
      background-color: rgba(200, 200, 200, 0.5);
      border: 1px solid black;
    }

    #indicatorSpan {
      display: inline-block;
      vertical-align: middle;
      width: 30px;
      height: 30px;
      background-color: rgba(100, 100, 100, 0.8);
      border: 2px solid #ccc;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",

      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(Map, SceneView, dom, on) {

      var map = new Map({
        basemap: "hybrid",
        ground: "world-elevation",
      });


      var view = new SceneView({
        map: map,
        container: "viewDiv",
        camera: {
          position: [7.654, 45.919, 5183],
          tilt: 80
        }
      });

      var rotateAntiClockwiseSpan = dom.byId("rotateAntiClockwiseSpan");
      var rotateClockwiseSpan = dom.byId("rotateClockwiseSpan");
      var indicatorSpan = dom.byId("indicatorSpan");
      on(rotateClockwiseSpan, "click", function() {
        rotateView(-1);
      });
      on(rotateAntiClockwiseSpan, "click", function() {
        rotateView(1);
      });
      on(indicatorSpan, "click", tiltView);


      view.watch("camera", updateIndicator);

      function rotateView(direction) {
        var heading = view.camera.heading;

        if (direction > 0) {
          heading = Math.floor((heading + 1e-3) / 90) * 90 + 90;
        } else {
          heading = Math.ceil((heading - 1e-3) / 90) * 90 - 90;
        }

        view.goTo({
          heading: heading
        });
      }

      function tiltView() {

        var tilt = view.camera.tilt + 1e-3;


        if (tilt >= 80) {
          tilt = 0;
        } else if (tilt >= 40) {
          tilt = 80;
        } else {
          tilt = 40;
        }

        view.goTo({
          tilt: tilt
        });
      }

      function updateIndicator(camera) {
        var tilt = camera.tilt;
        var heading = camera.heading;

        var transform = "rotateX(" + 0.8 * tilt +
          "deg) rotateY(0) rotateZ(" + -heading +
          "deg)";

        indicatorSpan.style["transform"] = transform;
        indicatorSpan.style["-webkit-transform"] = transform;
      }
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="buttonsDiv">
    <button id="rotateAntiClockwiseSpan" title="Rotate 90°">↻</button>
    <button id="indicatorSpan"></button>
    <button id="rotateClockwiseSpan" title="Rotate 90°">↺</button>
  </div>
</body>
</html>